<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>我的主页</title>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
    <link href="layui-v2.6.4/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="layui-v2.6.4/layui/css/modules/layer/default/layer.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="layui-v2.6.4/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript">
        layui.use('element', function () {
            var element = layui.element;
        });
        $(document).ready(function () {
            $("#div_zhankai").click(function () {
                $("#div_lianjie").hide(600);
            });
            $("#div_bofang").click(function () {
                $("#div_lianjie").show(600);
            });
        });
    </script>
    <style type="text/css">
        .maoboli {
            box-shadow: rgba(0, 0, 0, 0.6) 0 0 10px;
            color: white;
            background-color: rgba(65, 65, 65, 0.56);
            transition: all 0.2s linear 0s;
            border: 0px;
        }

        .img_url:hover {
            opacity: 0.5;
        }
    </style>
</head>
<body onload="show()" style="background: url(img/bg.jpg);background-size: 1880px;">
<script type="text/javascript">
    function setStyle(x) {
        document.getElementById(x).style.left = "400px";
        $(document.getElementById(x)).css("backdrop-filter", "10px");
    }

    function bianda(x, y) {
        $(document.getElementById(x)).removeClass(
            'layui-col-lg2 layui-col-lg-offset5 layui-col-md2 layui-col-md-offset5 layui-col-sm2 layui-col-sm-offset5 layui-col-xs2 layui-col-xs-offset5'
        );
        $(document.getElementById(x)).addClass(
            'layui-col-lg6 layui-col-lg-offset3 layui-col-md6 layui-col-md-offset3 layui-col-sm6 layui-col-sm-offset3 layui-col-xs6 layui-col-xs-offset3'
        );
        $(document.getElementById(y)).removeClass('layui-input maoboli');
        $(document.getElementById(y)).addClass('layui-input');
        $(body)

    }

    function thisOut(x, y) {
        $(document.getElementById(x)).removeClass(
            'layui-col-lg6 layui-col-lg-offset3 layui-col-md6 layui-col-md-offset3 layui-col-sm6 layui-col-sm-offset3 layui-col-xs6 layui-col-xs-offset3'
        );
        $(document.getElementById(x)).addClass(
            'layui-col-lg2 layui-col-lg-offset5 layui-col-md2 layui-col-md-offset5 layui-col-sm2 layui-col-sm-offset5 layui-col-xs2 layui-col-xs-offset5'
        );
        $(document.getElementById(y)).removeClass('layui-input');
        $(document.getElementById(y)).addClass('layui-input maoboli');
    }
</script>
<script>
    function show() {
        var date = new Date(); //日期对象
        var now = "";
        now = now + date.getHours() + ":";
        if (date.getMinutes() < 10) {
            now = now + 0 + date.getMinutes();
        } else {
            now = now + date.getMinutes();
        }
        now += ":"
        if (date.getSeconds() < 10) {
            now = now + 0 + date.getSeconds();
        } else {
            now = now + date.getSeconds();
        }
        document.getElementById("timenow").innerHTML = now;
        setTimeout("show()", 1000); //设置过1000毫秒就是1秒，调用show方法
    }
</script>
<div id="div_zong">

</div>
<div class="layui-fluid layui-row">
    <div class="layui-row" id="div_qingxi1" onclick="qingxi()">
        <div class="layui-col-lg2 layui-col-lg-offset5 layui-col-md2 layui-col-md-offset5 layui-col-sm2 layui-col-sm-offset5 layui-col-xs2 layui-col-xs-offset5"
             id="shiJianChuo">
            <h1 id="timenow" onclick="" onmouseenter="" onmouseout=""
                style="color: #dbd6d7;margin-top: 80px;text-align: center;text-shadow: 0 0 20px rgba(0,0,0,.9);">
                00:00:00</h1>
        </div>
    </div>
    <div class="layui-col-lg2 layui-col-lg-offset5 layui-col-md2 layui-col-md-offset5 layui-col-sm2 layui-col-sm-offset5 layui-col-xs2 layui-col-xs-offset5"
         id="div_kuang" style="transition: all .25s;">
        <form action="http://baidu.com/s?" class="layui-form" method="get" target="_blank">
            <input autocomplete="off" class="layui-input maoboli" id="sousuo" name="wd"
                   onfocus="bianda('div_kuang','sousuo')"
                   onfocusout="thisOut('div_kuang','sousuo')"
                   placeholder="Biu~"
                   style="height: 50px; border-radius: 30px;margin-top: 20px;text-align: center;">
        </form>
    </div>
    <div class="layui-col-lg10 layui-col-lg-offset1 layui-col-xs6 layui-col-xs-offset3 layui-row" id="div_lianjie"
         style="margin-top: 55px;height: 100px;">
        <a class="layui-col-lg1 layui-col-lg-offset3 layui-col-xs4 layui-row" href="https://www.bilibili.com/"
           target="_blank">
            <img class="layui-col-xs8 img_url layui-circle" src="dhimg/bilibili.png" style="margin:20px 0 0 0">
        </a>
        <a class="layui-col-lg1 layui-col-xs4 layui-row" href="https://www.csdn.net/" target="_blank">
            <img class="layui-col-xs8 img_url layui-circle" src="dhimg/csdn.png" style="margin:20px 0 0 0">
        </a>
        <a class="layui-col-lg1 layui-col-xs4 layui-row" href="https://leetcode-cn.com/" target="_blank">
            <img class="layui-col-xs8 img_url layui-circle" src="dhimg/leetcode.png" style="margin:20px 0 0 0">
        </a>
        <a class="layui-col-lg1 layui-col-xs4 layui-row" href="https://www.mcmod.cn/" target="_blank">
            <img class="layui-col-xs8 img_url layui-circle" src="dhimg/mcmod.png" style="margin:20px 0 0 0">
        </a>
        <a class="layui-col-lg1 layui-col-xs4 layui-row" href="https://mail.qq.com/" target="_blank">
            <img class="layui-col-xs8 img_url layui-circle" src="dhimg/qqemail.png" style="margin:20px 0 0 0">
        </a>
        <a class="layui-col-lg1 layui-col-xs4 layui-row" href="https://music.163.com/" target="_blank">
            <img class="layui-col-xs8 img_url layui-circle" src="dhimg/wangyiyun.png" style="margin:20px 0 0 0">
        </a>
    </div>
</div>

<div class="layui-col-lg12 layui-col-xs12 layui-row" id="div_bottom" style="position: absolute;bottom: 50px;">
    <div class="layui-col-lg4 layui-col-xs4 layui-row" id="div_bofang">
        <img class="img_url layui-col-lg2 layui-col-lg-offset1 layui-col-xs2 layui-col-xs-offset1"
             src="dhimg/bofang1.png">
    </div>
    <div class="layui-col-lg4 layui-col-xs4 layui-row" id="div_chenxinyu" style="">
        <img class="img_url layui-col-lg4 layui-col-lg-offset4 layui-col-xs4 layui-col-xs-offset4" id="logoChenXinYu"
             src="img/logo.png">
    </div>
    <div class="layui-col-lg4 layui-col-xs4 layui-row" id="div_zhankai">
        <img class="img_url layui-col-lg2 layui-col-lg-offset9 layui-col-xs2 layui-col-xs-offset9"
             src="dhimg/zhankai1.png">
    </div>
</div>
</body>
</html>
